<script setup></script>

<template>
  <div id="app">
  <router-view></router-view>
  <van-tabbar route v-model="active" @change="onChange" active-colcr="#ee0a24" inactive-color="#000">
    <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
    <van-tabbar-item icon="cart-o" to="/cart">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/my">我的</van-tabbar-item>
  </van-tabbar>
  </div> 
</template>

<script>
  import { ref,getCurrentInstance } from 'vue'
  import router from './router'

  export default {
    setup() {
      const active = ref(0)
      const { proxy } = getCurrentInstance()
      const onChange = (index) => {
        console.log(index);
        //购物车
        if(index == 1 ){
          //判断是否登录
          if(localStorage.getItem('isLogin')){
            router.push('/cart')
          } else {
            proxy.$toast('请先登录')
            setTimeout(() => {
              router.push('/login')
            },500)
          }
        }
        //我的页面
        if( index == 2 ){
           //判断是否登录
          if(localStorage.getItem('isLogin')){
            router.push('/my')
          } else {
            proxy.$toast('请先登录')
            setTimeout(() => {
              router.push('/login')
            },500)
          }
        }
      }
      return { active,
               onChange
       }
    }
  }
</script>
<style scoped>
   #app {
    height: 100vh;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
   }
</style>
